<template>
	<view class="index">
		<view class="header" style="background-image: url('../../static/index.png');">
			<view class='search'>
				<view class='address'>烟台市<image style="width: 25rpx;height: 25rpx;margin: 0 10rpx;"
						src="../../static/images/1.png" mode="aspectFit"></image>
				</view>
				<view class="input_box" @click="goPage()">
					<image class='sm' mode="aspectFit" src="../../static/images/sm.png"></image>
					<image class="mk" mode="aspectFit" src="../../static/images/mk.png"></image>
					<input disabled="true" placeholder-style="color:rgba(255, 255, 255, 0.5);font-size:28rpx;" class="input" type="text" placeholder="婚姻信息登记">
				</view>

				<view class='btn'>
					<image class="change" src="../../static/images/person.png">
					</image>个人
				</view>
			</view>
			<view class="tabbar">
				<view class="tabbar1">
					<image src='../../static/images/tabbar/1.png' mode="aspectFit"></image>
					<view class="">
						我要吐槽
					</view>
				</view>
				<view class="tabbar1">
					<image src='../../static/images/tabbar/2.png' mode="aspectFit"></image>
					<view class="">
						老年人服务
					</view>
				</view>
				<view class="tabbar1">
					<image src='../../static/images/tabbar/3.png' mode="aspectFit"></image>
					<view class="">
						我的证照
					</view>
				</view>
				<view class="tabbar1">
					<image src='../../static/images/tabbar/4.png' mode="aspectFit"></image>
					<view class="">
						办事大厅
					</view>
				</view>
			</view>
			<view class="weather">
				烟台 • 渔人码头
			</view>
			<view class="tip">
				<view class="tip-left">
					<image class="tip-left-img" src="../../static/images/smallbell.png" mode="aspectFit"></image>
				</view>
				<view class="xian-class">
					<view class="xian">
						
					</view>
				</view>
				<view class="tip-center">
					想就近领证结婚？这份操作指南请收好！
				</view>
				<view class="tip-right">
					<image class="tip-right-img" src="../../static/images/join.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="popularservices">
			<view class="popularservices-top">
				<span class="bolde">热门服务</span><image class="popularservices-top-img" src="../../static/images/service/Frame68.png" mode=""></image> <span class="gary">我的订阅</span>
			</view>
			<view class="popularservices-bottom">
				<view class="popularservices-bottom-item" v-for="item in services">
					<view class="">
						<image class="popularservices-bottom-img" :src="item.img" mode=""></image>
					</view>
					<view class="">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="yantai-img">
			<image class="yantai-item" src="../../static/images/IMG_4859@3x.png" mode="widthFix"></image>
		</view>
		<view class="content">
			<image class="content-img" src="../../static/images/Frame69@3x.png" mode="widthFix"></image>
		</view>
		
		
<custom-tabbar :curr-page="0" />
	</view>
</template>

<script setup lang="ts">


	
	import customTabbar from "@/components/custom-tabbar.vue"
	import { reactive,ref,toRefs   } from 'vue'
	import { useUserStore } from '@/stores/user'
	import { storeToRefs } from 'pinia'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	const userStore = useUserStore()
	const { isLogin } = storeToRefs(userStore)
	onLoad(()=>{
		Login()
	})
	// const { footerTabbar }
	// 判断是否登录
	const Login=()=>{
		if(isLogin.value==false){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
	}

	const goPage = () => {
		uni.navigateTo({
			url:'/pages/search/search1'
		})
	}
	const services=ref([
		{
			img:'../../static/images/service/zhengshu.png',
			text:'证书通'
		},{
			img:'../../static/images/service/banshi.png',
			text:'办事大厅'
		},{
			img:'../../static/images/service/zhufang.png',
			text:'住房公积金'
		},{
			img:'../../static/images/service/jinrou.png',
			text:'金融专区'
		},{
			img:'../../static/images/service/zhengwu.png',
			text:'政务公开'
		},{
			img:'../../static/images/service/yunyin.png',
			text:'婚姻登记'
		},{
			img:'../../static/images/service/yibao.png',
			text:'医保电子凭证'
		},{
			img:'../../static/images/service/chakan.png',
			text:'查看全部'
		}
	])

	// getData()
</script>

<style lang="scss">

	.tabbar{
		width: 100%;
		display: flex;
		color: #fff;
		font-size: 30rpx;
		margin-top: 40rpx;
	}
	.weather{
		background-color: rgba(0, 0, 0, 0.3);
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		margin-left: 5%;
		position: absolute;
		bottom: 100rpx;
	}
	.tabbar1{
		width: 25%;
		text-align: center;
		image{
			width: 80rpx;
			height: 70rpx;
			margin: 5rpx auto;
		}
	}
	.article-title {
		&::before {
			content: '';
			width: 8rpx;
			height: 34rpx;
			display: block;
			margin-right: 10rpx;
			background: $u-type-primary;
		}
	}

	.header {
		width: 100%;
		height: 700rpx;
		background-size: 100% 100%;
		position: relative;
	}

	.input_box {
		width: 50%;
		height: 60rpx;
		position: relative;
	}

	.input {
		padding-left: 80rpx;
		padding-top: 10rpx;
		width: calc(100% - 80rpx);
		background-color: rgba(255, 255, 255, 0.3);
		height: 50rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
	}

	.sm {
		position: absolute;
		left: 10rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.mk {
		position: absolute;
		right:10rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.search {
		width: 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		color: #fff;
		padding-top: 80rpx;





		.address {
			width: 20%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			justify-content: center;
		}

		.btn {
			// width: 20%;
			// width: 150rpx;
			border-radius: 50rpx;
			border: 1px solid #fff;
			height: 50rpx;
			line-height: 50rpx;
			position: relative;
			padding-left: 60rpx;
			padding-right: 20rpx;
		}

		.change {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			position: absolute;
			top: 10rpx;
			left: 20rpx;
		}
	}
	.tip{
		position: absolute;
		bottom: -10rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		width: 90%;
		margin-left: 5%;
		font-size: 28rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		.tip-left{
			width: 7%;
			
			.tip-left-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.tip-center{
			width: 83%;
			margin-top: 10rpx;
			
			
		}
		.xian-class{
			width: 5%;
		}
		.xian{
			background-color: #ccc;
			height: 20rpx;
			width: 2rpx;
			margin: 13rpx 15rpx;
		}
		.tip-right{
			width: 5%;
			
			.tip-right-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.popularservices{
		background-color: #fff;
		width: 90%;
		margin-left: 5%;
		margin-top: 50rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		.bolde{
			font-size: 35rpx;
			font-weight: bold;
		}
		.gary{
			color: #ccc;
			font-size: 29rpx;
			padding-left: 30rpx;
		}
		.popularservices-top{
			margin-bottom: 30rpx;
			.popularservices-top-img{
				width: 12rpx;
				height: 12rpx;
			}
		}
		.popularservices-bottom{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.popularservices-bottom-item{
				width: 25%;
				// margin:10rpx;
				text-align: center;
				font-size: 25rpx;
				.popularservices-bottom-img{
					width: 90rpx;
					height: 90rpx;
					margin-bottom: 10rpx;
				}
			}
			.popularservices-bottom-item:nth-child(4){
				margin-bottom: 30rpx;
			}
			
		}
	}

	.yantai-img{
		margin-top: 30rpx;
		width: 90%;
		margin-left: 5%;
		// height: 87rpx;
		.yantai-item{
			width: 100%;
			// height: 87rpx;
		}
	}
	.content{
		width: 100%;
		.content-img{
			width: 100%;
			// width: 300rpx;
		}
	}
</style>